<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button
        @click="showExtensionRequest({ id: query.id, ...formData }, 'add')"
        type="primary"
        v-show="!formType && [50,60].includes(formData.dictStatus)"
        v-hasPermi="['technology:drawing-task:applyForExtension']"
        >申请延期</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <p class="baseTitle">基本信息</p>
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        label-width="150px"
        v-loading="formLoading"
      >
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="formData.orderNumber" placeholder="请输入订单号" disabled />
        </el-form-item>
        <el-form-item label="客户代码" prop="customerCode">
          <el-input v-model="formData.customerCode" placeholder="请输入客户代码" disabled />
        </el-form-item>
        <el-form-item label="任务类型" prop="dictTaskType">
          <el-select v-model="formData.dictTaskType" placeholder="请选择任务类型" disabled>
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.TASK_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="formData.productNumber" placeholder="请输入产品编号" disabled />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="formData.productStandard" placeholder="请输入产品规格" disabled />
        </el-form-item>
        <el-form-item label="交货日期" prop="deliveryTime">
          <el-date-picker
            v-model="formData.deliveryTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择交货日期"
            disabled
          />
        </el-form-item>
        <el-form-item label="下单日期" prop="placeOrderDate">
          <el-date-picker
            v-model="formData.placeOrderDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择下单日期"
            disabled
          />
        </el-form-item>
        <el-form-item label="产品制图开始日期" prop="planStartDate">
          <el-date-picker
            v-model="formData.planStartDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择产品制图开始日期"
            disabled
          />
        </el-form-item>
        <el-form-item label="产品制图结束日期" prop="planEndDate">
          <el-date-picker
            v-model="formData.planEndDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择产品制图结束日期"
            disabled
          />
        </el-form-item>
        <el-form-item label="订单数量" prop="orderQuantity">
          <el-input v-model="formData.orderQuantity" placeholder="请输入订单数量" disabled />
        </el-form-item>
        <el-form-item label="出图类型" prop="dictDrawingType">
          <el-select v-model="formData.dictDrawingType" placeholder="请选择任务类型" disabled>
            <el-option
              v-for="dict in getIntDictOptions('drawing_type')"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型" prop="drawingComponentId">
          <el-select v-model="formData.drawingComponentId" class="!w-120px" disabled>
            <el-option
              v-for="dict in productTypeList"
              :key="dict.id"
              :label="dict.productType"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <p class="baseTitle">派单详情</p>
      <el-table ref="tableRef" :data="formData.tasks" style="width: 100%" border class="tableView">
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column
          :property="item.val"
          :label="item.label"
          :min-width="item.width"
          :key="item.val"
          v-for="item in tableTitle"
          align="left"
          header-align="left"
        >
          <template #default="scope">
            <template v-if="['proportion', 'explaind', 'ratedOperatingTime'].includes(item.val)">
              <el-input
                v-nextInput="item.val"
                :name="item.val"
                v-model="scope.row[item.val]"
                disabled
                :type="['ratedOperatingTime', 'proportion'].includes(item.val) ? 'number' : 'text'"
              />
            </template>
            <template v-else-if="item.val === 'componentProductId'">
              <el-select v-model="scope.row[item.val]" class="!w-120px" disabled>
                <el-option
                  v-for="dict in productDetailList"
                  :key="dict.id"
                  :label="dict.partType"
                  :value="dict.id"
                />
              </el-select>
            </template>
            <template v-else-if="['jobNumber'].includes(item.val)">
              <el-select v-model="scope.row[item.val]" class="!w-120px" disabled>
                <el-option
                  v-for="dict in scope.row.designersList"
                  :key="dict.jobNumber"
                  :label="dict.designerPersonName"
                  :value="dict.jobNumber"
                />
              </el-select>
            </template>
            <template v-else>
              <el-date-picker
                style="width: 180px"
                v-model="scope.row[item.val]"
                type="date"
                value-format="YYYY-MM-DD"
                :placeholder="`选择${item.label}`"
                disabled
              />
            </template>
          </template>
        </el-table-column>
      </el-table>
      <p class="baseTitle">延期申请</p>
      <el-table
        ref="tableRef"
        :data="formData.taskExtensionals"
        style="width: 100%"
        border
        class="tableView"
      >
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column
          :property="item.val"
          :label="item.label"
          :min-width="item.width"
          :key="item.val"
          v-for="item in extensionRequestTiyle"
          align="left"
          header-align="left"
        >
          <template #default="scope">
            <template v-if="item.val == 'dictExtensionalStatus'">{{
              getDictLabel('system_apply_status', scope.row[item.val])
            }}</template>
            <template v-else>{{ scope.row[item.val] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="left" header-align="left">
          <template #default="scope">
            <!-- 状态/dictExtensionalStatus :30：未通过   20：已撤回 -->
            <el-button
              @click="showExtensionRequest({ tasksId: formData.id, ...scope.row }, 'edit')"
              v-hasPermi="['technology:drawing-task:applyForExtension:edit']"
              v-show="[20, 30].includes(scope.row.dictExtensionalStatus)"
              >编辑</el-button
            >
            <el-button
              @click="showExtensionRequest({ tasksId: formData.id, ...scope.row }, 'detail')"
              v-hasPermi="['technology:drawing-task:applyForExtension:view']"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <ExtensionRequest ref="extensionRequestRef" @success="getDetail" />
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
   import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
   import * as DrawingTaskApi from '@/api/technology/drawingTask'
   import { useTagsViewStore } from '@/store/modules/tagsView'

   import ExtensionRequest from './extensionRequest.vue'
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formData = ref({
     id: undefined,
     orderNumber: undefined,
     customerCode: undefined,
     dictTaskType: undefined,
     productNumber: undefined,
     productStandard: undefined,
     deliveryTime: undefined,
     placeOrderDate: undefined,
     planStartDate: undefined,
     planEndDate: undefined,
     orderQuantity: undefined,
     dictDrawingType: undefined,
     productType: undefined,
     drawingComponentId: undefined
   })

   /**编辑延期申请
    * type：edit/编辑  detail/查看   add/新增
    */
   const extensionRequestRef = ref()
   const showExtensionRequest = (data: object, type: string) => {
     extensionRequestRef.value.open(data, type)
   }
   /**延期申请表头 */
   const extensionRequestTiyle = ref([
     {
       label: '延期申请编号',
       val: 'extensionalCode',
       width: 200
     },
     {
       label: '申请人',
       val: 'extensionalUser',
       width: 200
     },
     {
       label: '申请状态',
       val: 'dictExtensionalStatus',
       width: 200
     },
     {
       label: '申请计划开始时间',
       val: 'exPlanStartTime',
       width: 200
     },
     {
       label: '申请计划结束时间',
       val: 'exPlanEndTime',
       width: 200
     }
   ])

   /**派单详情表头 */
   const tableTitle = ref([
     {
       label: '部件类型',
       val: 'componentProductId',
       width: 150
     },
     {
       label: '占比(%)',
       val: 'proportion',
       width: 150
     },
     {
       label: '说明',
       val: 'explaind',
       width: 200
     },
     {
       label: '设计员',
       val: 'jobNumber',
       width: 150
     },
     {
       label: '计划开始日期',
       val: 'planStartDate',
       width: 220
     },
     {
       label: '计划结束日期',
       val: 'planEndDate',
       width: 220
     },
     {
       label: '定额工时(天)',
       val: 'ratedOperatingTime',
       width: 150
     }
   ])

   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/technology/technology/drawingProduction/drawingTask'
     })
   }

   const productTypeList = ref([]) //产品类型列表
   const productDetailList = ref([]) //部件列表

   /**请求详情 */
   const getDetail = async () => {
     const res = await DrawingTaskApi.getDrawingTask(query.id)
     //产品类型列表
     productTypeList.value.push({
       productType: res.productType,
       id: res.drawingComponentId
     })
     res.tasks = [res.drawingTask]
     //部件列表
     productDetailList.value.push({
       partType: res.drawingTask.partType,
       id: res.drawingTask.componentProductId
     })
     //设计员
     res.tasks[0].designersList = [
       {
         designerPersonName: res.tasks[0].designerPersonName,
         jobNumber: res.tasks[0].jobNumber
       }
     ]
     formData.value = res
     formLoading.value = false
   }
   /** 初始化 */
   const { query } = useRoute() // 路由的查询
   const formType = ref(false) //是否可编辑
   const contentHeight = ref(0)
   onMounted(() => {
     formLoading.value = true
     //edit:编辑 look:查看
     formType.value = query.type == 'edit' ? false : true
     contentHeight.value = document.body.clientHeight - 127
     if (query.id) {
       getDetail()
     }
   })
</script>
<style lang="scss" scoped>
   .routeHeader {
     width: 100%;
     border-bottom: 1px solid #969696;
     display: flex;
     align-items: center;
     padding: 10px 0;
   }
   .baseTitle {
     font-weight: bold;
     padding: 20px 0;
   }
   .tableView {
     :deep(.el-input__wrapper) {
       box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
       cursor: default;
       .el-input__inner {
         cursor: default !important;
         text-align: center;
       }
     }
   }
</style>